<template>
	<view class="">
		<view :class="name" :style="[...modeStyle]">
			<slot />
		</view>
		<view v-if="placeholder" :style="{'height':boxHeight}" />
	</view>
</template>

<script>
	export default {
		props: {
			placeholder: {
				type: Boolean,
				default: true
			},
			mode: {
				type: String,
				default: 'top'
			},
			bgColor: {
				type: String,
				default: 'rgba(0,0,0,0)'
			},
			topStatus: {
				type: Boolean,
				default: false
			},
			name: {
				type: String,
				default: 'fixedTb'
			}
		},
		data() {
			return {
				boxHeight: '38px'
			}
		},
		mounted() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select(`.${this.name}`).boundingClientRect(data => {
					this.boxHeight = `${data.height}px`
				}).exec();
			})
		},
		computed: {
			modeStyle() {
				let styleData = {
					background: this.bgColor,
					position: 'fixed',
					left: 0,
					width: '100%',
					'z-index': 1
				}
				if (this.mode == 'top') {
					Object.assign(styleData, {
						top: 0
					})
					// #ifdef APP-PLUS
					let topPlaceholder = uni.getSystemInfoSync().statusBarHeight
					// #endif
					// #ifdef MP-WEIXIN
					let topPlaceholder = uni.getMenuButtonBoundingClientRect().top
					// #endif
					if (this.topStatus) {
						Object.assign(styleData, {
							'padding-top': `${topPlaceholder}px`,
						})
					}
				} else {
					Object.assign(styleData, {
						bottom: 0
					})
				}
				return styleData
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
